import { View, Text, StatusBar } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Link } from 'expo-router'
import { mallIndex } from '../../service'
import ZhSwiper from '../../components/ZhSwiper'
import ZhTabs from '../../components/ZhTabs'

//使用上下文步骤1：创建数据上下文对象，并导出，供子孙们导入使用
//export let GoodsTypesCtx = React.createContext( )
import {GoodsTypesCtx} from '../../ctx'

export default function List() {
  //状态数据 —— 当前登录用户的信息
  let [userInfo, setUserInfo] = useState({})
  //状态数据 —— 轮播广告数据
  let [carousels, setCarousels] = useState([])
  //状态数据 —— 商品类别列表
  let [goodsTypes, setGoodsTypes] = useState([])

  //生命周期方法3：组件挂载完成时，执行一个辅助功能：异步请求服务器端接口数据
  useEffect( ()=>{
    //注意：此处不允许给外部函数直接添加async关键字——Effect方法只能返回清理函数
    ;(async()=>{
      let data = await mallIndex()
      setUserInfo(data.userInfo)      //获取当前登录用的信息
      setCarousels(data.carousels)    //获取轮播广告条目
      setGoodsTypes(data.goodsTypes)  //获取商品类别类别
    })()
  }, [])
  return (
    <View style={{height:'100%'}}>
      {/* F1: 顶部的状态栏 */}
      <StatusBar barStyle='light-content'/>
      {/* F2: 头部的标题栏 —— _layout中的Stack导航已经设置完成 */}
      {/* F3: 上方的轮播广告  ——  使用自定义组件ZhSwiper/FlatList */}
      <ZhSwiper list={carousels}/>
      {/* F4: 主体的标签页组件 —— 使用自定义组件ZhTabs */}
      {/* 使用上下文对象步骤2：在上下文中提供数据值 */}
      <GoodsTypesCtx.Provider  value={goodsTypes}>
        <ZhTabs/>
      </GoodsTypesCtx.Provider>
    </View>
  )
}